<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	<script src="vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<!-- 表单元素可以通过v-model将数据进行双向绑定 -->
		<div id="app">
			<div>
				<input v-model="message" placeholder="edit me" />
				<p>{{message}}</p>
				<!-- 在文本区域插值 (<textarea>{{text}}</textarea>) 并不会生效，
				应用 v-model 来代替。 -->
				<textarea v-model="message2">
				</textarea>
				<p>{{message2}}</p>
			</div>
			
			<div>
				<input type="checkbox" id="jack" value="Jack" v-model="picked" >
					<label for="jack">Jack</label>
				</input>
				<input type="checkbox" id="john" value="John" v-model="picked" true-value="YEs" false-value="NO" >
					<label for="john">John</label>
				</input>
				</br>
				<span>{{picked}}</span>
			</div>
			
			<div>
				<input type="radio" id="one" value="One" v-model="selected" >
					<label for="one">One</label>
				</input>
				<input type="radio" id="two" value="Two" v-model="selected" >
					<label for="two">Two</label>
				</input>
				</br>
				<span>{{selected}}</span>
			</div>
			
			<button type="button" @click="submit">submit</button>
		</div>
		
		
		
		<script type="text/javascript">
			var vm = new Vue({
				el:"#app",
				data:{
					message:"",
					message2:"",
					picked:[],
					selected:""
				},
				methods:{
					submit:function(){
						var obj = {
							msg1:this.message,
							msg2:this.message2,
							pick:this.picked,
							select:this.selected
						}
						console.log(obj);
					}
				}
			})
			
		</script>
	</body>
</html>
